<template>
	<div class="changePassword_page layer">
		<van-nav-bar :title="type == 1 ? $t('my.setMobile') : $t('my.setEamil')" left-arrow @click-left="$router.go(-1)"
			:border="false" />
		<div class="cont">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm" label-position="top"
				hide-required-asterisk>
				<el-form-item :label="type == 1 ? $t('phone') : $t('email')" prop="account">
					<el-input v-model="ruleForm.account" :placeholder="type == 1 ? $t('login.phoneNumber') : $t('login.email')"
						type="text" :class="type == 1 ? 'area_input' : ''">
						<div class="area_code" @click="showAreaCode = !showAreaCode" slot="prefix" v-if="type == 1">
							<span>{{ruleForm.area_code}}</span>
							<i class="el-icon-caret-bottom"></i>
						</div>
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('forgot.smsCode')" prop="code">
					<el-input v-model="ruleForm.captcha" :placeholder="$t('forgot.verification')" type="text">
						<div class="downtime" :style="dwonCodeText ? 'color: #fff' : ''" @click="handleSms" slot="suffix">
							{{dwonCodeText ? dwonCodeText : codeText}}
						</div>
					</el-input>
				</el-form-item>
			</el-form>
		</div>
		<el-button class="submit_but" @click="submit">{{$t('my.binding')}}</el-button>
		<AreaCode v-if="showAreaCode" v-model="showAreaCode" @change="(val) => ruleForm.area_code = val" />
	</div>
</template>

<script>
	import AreaCode from '@/components/areaCode.vue'
	import {
		userChangemobile,
		userChangeemail
	} from '@/api/my'
	import {
		smsSend,
		emsSend
	} from '@/api/home'
	export default {
		components: {
			AreaCode,
		},
		data() {
			return {
				intimer: null,
				showAreaCode: false,
				dwonCodeText: '',
				type: 1, // 1手机号 2邮箱
				ruleForm: {
					area_code: 1,
					account: '',
					captcha: '',
				},
			}
		},
		computed: {
			codeText: {
				get() {
					return this.$t('forgot.get')
				},
				set(val) {
					return val
				}
			},
			userInfo() {
				return this.$store.state.userInfo
			},
			rules() {
				let obj = {
					account: [{
						required: true,
						message: this.type == 1 ? this.$t('login.phoneNumber') : this.$t('login.email'),
						trigger: 'change'
					}],
					captcha: [{
						required: true,
						message: this.$t('forgot.verification'),
						trigger: 'change'
					}]
				}
				if (this.type == 2) {
					obj.account.push({
						type: 'email',
						message: this.$t('login.correctEmail'),
						trigger: ['blur', 'change']
					})
				}
				return obj
			}
		},
		watch: {},
		mounted() {
			this.type = this.$route.query.type
			// console.log('userInfo', this.userInfo);
			if (this.type == 1) {
				this.ruleForm.account = this.userInfo.mobile
				this.ruleForm.area_code = this.userInfo.area_code
			} else {
				this.ruleForm.account = this.userInfo.email
			}
		},
		methods: {
			async handleSms() {
				let res;
				if (this.intimer) return
				if (this.type == 1) {
					res = await smsSend({
						mobile: this.userInfo.mobile,
						event: 'changemobile',
						area_code: this.userInfo.area_code
					})
				} else if (this.type == 2) {
					res = await emsSend({
						email: this.userInfo.email,
						event: 'changeemail'
					})
				}
				if (res && res.code == 1) {
					let time = 60
					this.codeText = '60s'
					this.intimer = setInterval(() => {
						this.dwonCodeText = (--time) + 's'
						if (time <= 0) {
							clearInterval(this.intimer)
							this.intimer = null
							this.dwonCodeText = '';
							this.codeText = this.$t('message.get')
						}
					}, 1000)
					this.$toast.success(res.msg)
				} else {
					this.$toast.fail(res?.msg || this.$t('fail'))
				}
			},
			submit() {
				// this.$router.replace('/bindPhoneEmail')
				this.$refs.ruleForm.validate((valid) => {
					if (valid) {
						if (this.type == 1) {
							this.setPhone()
						} else if (this.type == 2) {
							this.setEmail()
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			async setPhone() {
				const res = await userChangemobile({
					...this.ruleForm,
					mobile: this.ruleForm.account,
				})
				if (res && res.code == 1) {
					this.$store.dispatch('getUserInfo')
					this.$toast.success(res.msg)
				} else {
					this.$toast.fail(res.msg)
				}
			},
			async setEmail() {
				const res = await userChangeemail({
					...this.ruleForm,
					email: this.ruleForm.account,
				})
				if (res && res.code == 1) {
					this.$store.dispatch('getUserInfo')
					this.$toast.success(res.msg)
				} else {
					this.$toast.fail(res.msg)
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.changePassword_page {
		.ruleForm {
			text-align: left;

			::v-deep .el-form-item {
				margin-bottom: 30px;
			}

			::v-deep .el-form-item__label {
				line-height: unset;
				color: #fff;
			}

			::v-deep .el-input__inner {
				border: 0;
				border-radius: 16px;
				background-color: #3D3D3D;
				color: #fff;
				padding: 0 15px;
				height: 50px;
				line-height: 50px;

				&::placeholder {
					color: #999;
				}
			}

			.area_input {
				::v-deep .el-input__inner {
					padding-left: 50px;
				}

				.area_code {
					width: 40px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #fff;

					span {
						flex: 1;
						text-align: center;
					}
				}
			}

			::v-deep .el-form-item__content {
				line-height: 50px;
			}

			.des {
				line-height: normal;
				margin-bottom: 15px;
				color: #999;
			}

			.downtime {
				color: #0DF5E3;
				margin-right: 10px;
			}
		}

		.submit_but {
			margin-top: 30px;
		}
	}
</style>